$(function () {
    let form = layui.form;
    let layer = layui.layer;

    initCate();
    // 定义加载文章分类的方法
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('初始化文章分类失败！');
                }
                // 调用模板引擎，渲染分类的下拉菜单
                let htmlStr = template('tpl-cate', res);
                $('[name=cate_id]').html(htmlStr);
                // 一定要记得调用 form.render() 方法
                form.render();
            }
        })
    }
    // 初始化富文本编辑器
    initEditor();
    // 1. 获取图片
    let $image = $('#image')
    // 2. 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(options);

    $("#chooseImg").on("click", function () {
        $("#file").click();
    })
    //给file注册change事件
    $("#file").on("change", function () {
        //获取到文件列表对象
        const filelist = this.files;
        //判断是否选择了文件
        if (filelist.length <= 0) return layer.msg('请选择图片');
        //3.将文件对象转换路径
        const imgURL = URL.createObjectURL(filelist[0]);
        //需要将选择的图片渲染到裁剪区
        $image
            .cropper('destroy') //销毁旧的裁剪区域
            .attr('src', imgURL) //重新设置图片路径
            .cropper(options) //重新初始化裁剪区域
    })

    //定义文章的发布状态
    let art_state = '已发布';
    //为存草稿按钮绑定点击事件
    $("#btnSave").on("click", function () {
        art_state = '草稿'
    })

    //为表单绑定submit事件
    $("#form-pub").on("submit", function (e) {
        //阻止表单的默认重置行为
        e.preventDefault();
        //基于form表单 快速创建一个FormData 对象
        const fd = new FormData($(this)[0]);
        //将文章的发布状态 存到fd中
        fd.append('state', art_state)
        // fd.forEach(function (v, k) {
        //     console.log(k, v);
        // })

        //将封面裁剪过后的图片 输出为一个文件对象
        $image.cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob)
                // 6. 发起 ajax 数据请求
                publishArticle(fd);
            })
    })
    //定义一个发布文章的方法
    function publishArticle(fd) {
        $.ajax({
            method: 'POST',
            url: '/my/article/add',
            data: fd,
            //注意：如果向服务器提交的是 FormData 格式的数据 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('发布文章失败！');
                }
                layer.msg('发布文章成功！');
                //发布文章成功后 跳转到文章列表页面
                location.href = '/article/文章列表.html';
                //文章发布成功以后 需要将文章列表页面 高亮显示
                window.parent.document.querySelector("#list").click();
            }
        })
    }
})